<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素循环隐藏显示</title>
    <style>

        .content {
            display: none;
        }

    </style>
</head>
<body>
<div>
    <h1 id="head">一. 点击循环显示节点</h1>
    <div class="content">
        jquery是一个js库
    </div>
    <h2 id="head4">1.1 使用toggle来模拟鼠标单击事件</h2>
    <div>
        jquery是一个js库4
    </div>
</div>
<div>
    <h1 id="head2">二. 鼠标移入移出循环显示节点</h1>
    <div class="content">
        jquery是一个js库2
    </div>
    <h2 id="head3">2.1 使用合成时间模拟鼠标悬停</h2>
    <div class="content">
        jquery是一个js库3
    </div>
</div>
<div>
    <h1>三. 事件冒泡</h1>
    <h2>3.1 事件冒泡简单演示</h2>
    <div id="bubbleDiv" style="width: 300px; height: 50px; background-color: red;">
        <p id="bubbleP" style="width: 200px; height: 50px; background-color: blue;">
            <span id="bubbleSpan" style="width: 100px; height: 50px; background-color: yellow;">点击触发事件冒泡</span>
        </p>
    </div>
    <h2>3.2 阻止事件冒泡</h2>
    <div id="bubbleDiv1" style="width: 300px; height: 50px; background-color: red;">
        <p id="bubbleP1" style="width: 200px; height: 50px; background-color: blue;">
            <span id="bubbleSpan1" style="width: 100px; height: 50px; background-color: yellow;">点击触发事件冒泡</span>
        </p>
    </div>
</div>
</body>
<script src="../../js/jquery-3.4.1.js"></script>
<script>

    $(function () {
        showGotoHideLoop();
        toggleEvent();
        mouseShowOrHide();
        syntheticEvent();
        bubbleEventInit();
        stopBubbleEventInit();
    });

    function showGotoHideLoop() {
        $('#head').bind("click", function () {
            let $content = $('#head').next();
            /**
             * 说明:
             *      1. 节点.is(':visible'): 判断元素是否隐藏, 其实就是判断display属性是否为none.
             */
            if($(this).next().is(':visible')) {
                $content.hide();
            } else {
                $content.show();
            }
        });
    }

    function mouseShowOrHide() {
        $('#head2').bind("mouseover", function () {
            $(this).next().show();
        }).bind("mouseout", function () {
            $(this).next().hide();
        });
    }

    function syntheticEvent() {
        /**
         * 说明:
         *      1. hover方法说明:
         *          - 方法模型: hover(enter, leave);
         *              1. enter: 是光标移动到元素上触发的事件;
         *              2. leave: 当光标移出元素时触发的事件.
         */
        $('#head3').hover(function () {
            $(this).next().show();
        }, function () {
            $(this).next().hide();
        });
    }

    function toggleEvent() {
        $('#head4').bind("click", function () {
            $(this).next().toggle();
        })
    }

    /**
     * 说明:
     *      1. 在页面上点击文字时, 从console中可以看到, 点一次三个事件都触发了.
     */
    function bubbleEventInit() {
        $('#bubbleDiv').bind("click", function () {
            console.log("bubbleDiv事件触发");
        });
        $('#bubbleP').bind("click", function () {
            console.log("bubbleP事件触发");
        });
        $('#bubbleSpan').bind("click", function () {
            console.log("bubbleSpan事件触发");
        });
    }

    /**
     * 说明:
     *      1. bing方法的第二个参数是事件触发的函数, 而这个函数的参数event表示传入的事件;
     *          - 调用这个事件的stopPropagation()方法即可阻止事件冒泡.
     */
    function stopBubbleEventInit() {
        $('#bubbleDiv1').bind("click", function () {
            console.log("bubbleDiv事件触发");
        });
        $('#bubbleP1').bind("click", function (event) {
            console.log("bubbleP事件触发");
            event.stopPropagation();
        });
        $('#bubbleSpan1').bind("click", function (event) {
            console.log("bubbleSpan事件触发");
            event.stopPropagation();
        });
    }

</script>
</html>